<template>
  <div style="padding: 20px">
    <div
      style="
        height: 50px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 20px 0 20px;
      "
    >
      <!-- 搜索框 -->
      <div>
        <el-autocomplete
          size="large"
          v-model="city"
          :fetch-suggestions="querySearchAsync"
          placeholder="输入报警城市名称"
          @select="handleSelect"
        />
      </div>

      <!-- 右侧新增按钮 -->
      <!-- <div style="display: flex">
        <el-button type="warning" @click="handleExport"
          ><el-icon style="margin-right: 5px"><Upload /></el-icon
          >导出</el-button
        >
      </div> -->
    </div>

    <!-- 表格数据展示部分 -->
    <div style="padding: 20px">
      <el-table
        show-overflow-tooltip="true"
        :data="tableData"
        style="width: 100%"
        height="auto"
        v-loading="dataLoading"
        element-loading-text="数据加载中..."
      >
        <el-table-column fixed prop="createTime" label="报警时段" width="220" />
        <el-table-column prop="locationName" label="报警位置" width="160" />
        <el-table-column prop="longitude" label="经度" width="200">
          <template #default="scope">
            <el-tag
              style="font-size: 14px"
              type="success"
              size="large"
              effect="dark"
              color="#626aef"
            >
              {{ scope.row.longitude }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="latitude" label="纬度" width="200">
          <template #default="scope">
            <el-tag
              style="font-size: 14px"
              type="success"
              size="large"
              effect="dark"
              color="#626aef"
              >{{ scope.row.latitude }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="140">
          <template #default="scope">
            <el-tag
              style="font-size: 13px"
              v-if="scope.row.status === 'UNSENT'"
              type="warning"
              size="large"
              effect="dark"
              >未发送</el-tag
            >
            <el-tag
              style="font-size: 13px"
              v-if="scope.row.status === 'SENT'"
              type="success"
              size="large"
              effect="dark"
              >已发送</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="120">
          <template #default="scope">
            <el-button
              v-if="scope.row.status === 'UNSENT'"
              link
              type="danger"
              size="small"
              @click="handleSent(scope.row.id)"
            >
              点击发送
            </el-button>
            <el-button
              disabled
              v-if="scope.row.status === 'SENT'"
              link
              type="danger"
              size="small"
            >
              已发送
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <div style="padding: 10px 0 20px 20px">
      <el-pagination
        :current-page="pageNO"
        :page-size="pageSize"
        background
        @change="handlePageChange"
        layout="prev, pager, next"
        :total="total"
      />
    </div>

    <!-- 选择发送机器弹框 -->
    <div>
      <el-dialog
        v-model="centerDialogVisible"
        title="请选择发送机器对象"
        width="500"
        align-center
      >
        <div>
          <el-select
            v-model="machineId"
            placeholder="Select"
            size="large"
            style="width: 240px"
          >
            <template #header>
              <span>机器编号</span>
            </template>
            <el-option
              v-for="item in machineIds"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </div>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="cancelHandler">取消</el-button>
            <el-button type="primary" @click="doSent"> 发送 </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { queryCityNameData } from "@/api/monitor/index";
import {
  querySmartData,
  queryMachineId,
  handleDoSent,
} from "@/api/smart/index";

const centerDialogVisible = ref(false);
const dataLoading = ref(true);
const tableData = ref([]);
const city = ref("");
const pageNo = ref(1);
const pageSize = ref(10);
const total = ref(0);
onMounted(() => {
  getSmartList();
});

//获取主要城市温度数据
const getSmartList = () => {
  querySmartData(pageNo.value, pageSize.value, city.value).then((res) => {
    if (res.code === 200 && res.data !== null) {
      tableData.value = res.data.data;
      total.value = res.data.total;
      dataLoading.value = false;
    }
  });
};

//监听分页
const handlePageChange = (currentNO, currentSize) => {
  pageNo.value = currentNO;
  pageSize.value = currentSize;
  getSmartList();
};

let timeout = null;
function querySearchAsync(name, callback) {
  getSmartList();
  queryCityNameData().then((res) => {
    if (res.code === 200) {
      const list = [];
      //封装要显示的数据
      for (let v of res.data) {
        list.push({ value: v });
      }
      const results = name ? list.filter(createFilter(name)) : list;
      // 调用 callback 返回建议列表的数据,是一个数组类型
      clearTimeout(timeout);
      timeout = setTimeout(() => {
        callback(results);
      }, 2000 * Math.random());
    }
  });
}

const createFilter = (queryString) => {
  return (restaurant) => {
    return (
      restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
    );
  };
};

//搜索方法
const handleSelect = (param) => {
  city.value = param.value;
  getSmartList();
};

//处理发送
const machineIds = ref([]);
const machineId = ref("");
const smartId = ref(null);
const handleSent = (id) => {
  smartId.value = id;
  queryMachineId(id).then((res) => {
    if (res.code === 200) {
      machineIds.value = res.data;
      centerDialogVisible.value = true;
    }
  });
};

//发送经纬度信息给具体机器
const doSent = () => {
  handleDoSent(smartId.value, machineId.value).then((res) => {
    if (res.code === 200) {
      centerDialogVisible.value = false;
      smartId.value = null;
      machineId.value = "";
      getSmartList();
      ElMessage({
        type: "success",
        message: "发送成功！",
      });
    }
  });
};

//取消发送
const cancelHandler = () => {
  centerDialogVisible.value = false;
  smartId.value = null;
  machineId.value = "";
};

//导出数据
const handleExport = () => {
  window.open("http://localhost:9600/common/monitor/export");
  ElMessage({
    showClose: true,
    message: "导出成功！",
    type: "success",
  });
};
</script>

<style scoped>
</style>